import React from 'react'
import {Col, Row,Radio } from "antd";

import {WeaLocaleProvider,WeaInputNumber,WeaCheckbox,WeaSelect} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

export default class SettingExtend extends React.Component{

    componentWillMount(){
        this.setDefaultState(this.props)
    }

    componentWillReceiveProps(nextProps){
        this.setDefaultState(nextProps)
    }

    setDefaultState = (props)=>{
        const {setting,setSetting} = props
        const {isMultilineDisplay,showNum,height,isAutoHeight,showWay,sliderType,isHasSliderArrow,isAutoPlay,titleFontSize,sliderSpeed} = setting
        if( showNum == undefined|| height == undefined || isMultilineDisplay == undefined
            || isAutoHeight == undefined || showWay == undefined || sliderType == undefined || isHasSliderArrow == undefined
             || isAutoPlay == undefined || sliderSpeed == undefined || titleFontSize == undefined){
            setSetting({
                isMultilineDisplay:'0',
                showNum:1,
                height: 300,
                isAutoHeight: '0',
                showWay: '2',
                sliderType : '5',
                isHasSliderArrow : '1',
                isAutoPlay : '1',
                titleFontSize : 16,
                sliderSpeed : 2000
            })
        }
    }

    render (){
        const {setting,setSetting} = this.props
        const {isMultilineDisplay,showNum,widthType,height,isAutoHeight,showWay,layoutType,sliderType,isHasSliderArrow,isAutoPlay,titleFontSize,sliderSpeed} = setting

        const sliderTypeLFOptions = [
            {
                key: "1",
                selected: true,
                showname: "无"
            },{
                key: "5",
                selected: false,
                showname: "向左"
            },{
                key: "3",
                selected: false,
                showname: "向右"
            }
        ]

        return (
            <div>

                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hphpuq`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4wqip0`} span={6}>
                            <div className="item-title">{'视频大小'} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@sf49fz`} span={18}>
                            {
                                isAutoHeight == '0' ? (
                                    <span style={{'margin-left':'5px'}}>{getLabel(207, '高度')} :</span>
                                ) : null
                            }
                            {
                                isAutoHeight == '0' ? (
                                    <div style={{display:'inline-block',width: '50px','vertical-align':'middle','margin-left':'5px'}}>
                                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@djmlbm`} value={height} onChange={(value)=>{setSetting({height:value})}}></WeaInputNumber>
                                    </div>
                                ) : null
                            }
                            {
                                isAutoHeight == '0' ? (
                                    <span style={{display:'inline-block',width: '50px','vertical-align':'middle','margin-left':'5px'}}>{ 'px'}</span>
                                ) : null
                            }


                                    <div style={{display:'inline-block','margin-left':'5px'}}>
                                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@easz58`}
                                            value={isAutoHeight}
                                            onChange={(value) => {
                                                setSetting({isAutoHeight:value})
                                            }}
                                        />
                                    </div>
                                    <span style={{'margin-left':'5px'}}>{getLabel(22494, '自适应高度')}</span>


                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2sj0xl`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@nesqjp`} span={6}>
                            <div className="item-title">{getLabel(21653, '显示方式')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jas8kh`} span={18}>
                            <Radio.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@lf5v9s`} defaultValue="1" buttonStyle="solid" value={showWay} onChange={(e)=>{setSetting({showWay:e.target.value})}}>
                                <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@cez9sj`} value="1">{ '单个显示'}</Radio.Button>
                                <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@x8lelp`} value="2">{'多个显示'}</Radio.Button>
                            </Radio.Group>
                            {
                                showWay == '2' ? (
                                    <div style={{display:'inline-block','margin-left':'20px'}}>
                                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@f2ymu1`}
                                            value={isMultilineDisplay}
                                            onChange={(value) => {
                                                setSetting({isMultilineDisplay:value})
                                            }}
                                        />
                                    </div>

                                ) : null
                            }

                            {
                                showWay == '2' ? (
                                    <span style={{'margin-left':'5px'}}>{'多行显示'}</span>
                                ) : null

                            }
                            {
                                showWay == '2' ? (
                                    <span style={{'margin-left':'10px'}}>{'每行显示数'}</span>
                                ) : null
                            }
                            {
                                showWay == '2' ? (
                                    <div style={{display:'inline-block',width: '50px','vertical-align':'middle','margin-left':'5px'}}>
                                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@0rgnn8`} value={showNum} onChange={(value)=>{setSetting({showNum:value})}}></WeaInputNumber>
                                    </div>
                                ) : null
                            }

                        </Col>
                    </Row>
                </div>
                {
                    showWay == '2'&& isMultilineDisplay == '0'? (
                        <div className="set-item">
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@knms71`} type="flex" middle="middle">
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rq7cnq`} span={6}>
                                    <div className="item-title">{getLabel(20281, '滚动方向')} :</div>
                                    <div className="middle-box"></div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3pae7n`} span={18}>
                                    <div style={{display:'inline-block',width: '80px','vertical-align':'middle'}}>
                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@v6i2c4`}
                                            options={sliderTypeLFOptions}
                                            value={sliderType}
                                            viewAttr={2}
                                            onChange={(v, showname) => {
                                                setSetting({ sliderType: v })
                                            }}
                                        />
                                    </div>
                                    <div style={{display:'inline-block','margin-left':'5px','vertical-align':'middle'}}>
                                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@vfc4qi`}
                                            value={isHasSliderArrow}
                                            onChange={(value) => {
                                                setSetting({isHasSliderArrow:value})
                                            }}
                                        />
                                    </div>
                                    <span style={{'margin-left':'5px'}}>{getLabel(22928, '滚动指向')}</span>

                                </Col>
                            </Row>
                        </div>
                    ) :  null
                }
                {
                    showWay == '2' && sliderType != '1' && isMultilineDisplay == '0'? (
                        <div className="set-item">
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@y4zesv`} type="flex" middle="middle">
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8ca862`} span={6}>
                                    <div className="item-title">{getLabel(22927, '滚动速度')} :</div>
                                    <div className="middle-box"></div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jts97f`} span={18}>
                                    <div style={{display:'inline-block',width: '50px','vertical-align':'middle'}}>
                                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@dsx6ry`} value={sliderSpeed} onChange={(value)=>{setSetting({sliderSpeed:value})}}></WeaInputNumber>
                                    </div> ms
                                </Col>
                            </Row>
                        </div>
                    ) : null
                }
                {
                    showWay == '1' ? (
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@xmp7fq`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@37l6nm`} span={6}>
                            <div className="item-title">{getLabel(22840, '自动播放')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2o8mbg`} span={18}>
                            <div style={{display:'inline-block','vertical-align':'middle','margin-left':'5px'}}>
                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@22rpfg`}
                                    value={isAutoPlay}
                                    display="switch"
                                    style={{display: 'inline'}}
                                    onChange={(value) => {
                                        setSetting({isAutoPlay:value})
                                    }}
                                />
                            </div>
                        </Col>
                    </Row>
                </div>
                    ) :  null
                }
            </div>
        )
    }
}